<template>
  <div class="home">
    <div class="grid">
      <ImageCard
        v-for="image in images"
        :key="image.id"
        :image-url="image.url"
        :title="image.title"
        :username="image.user.username"
        :user-avatar="image.user.avatar"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import { useImageStore } from '../stores/image'
import ImageCard from '../components/ImageCard.vue'

const imageStore = useImageStore()

onMounted(() => {
  imageStore.fetchImages()
})

const { images } = storeToRefs(imageStore)
</script>

<style scoped lang="scss">
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
</style> 